<template>
  <div class="content">
    <span class="layui-badge-dot"></span>
    <span v-for="color in colors" :key="color" :class="['layui-badge-dot', `bg-${color}`]"></span>
    <fieldset class="main">
      <legend>个人信息</legend>
        <fieldset class="message">
          <legend>信息</legend>
          <div style="margin-left: -20px;">
            <el-card class="box-card" style="margin-top: 10px;height: 100%">
              <div slot="header" class="clearfix" style="height: 20px"></div>
              <div class="img">
                <img src="../images/head.jpg">
              </div>
              <el-descriptions class="information" title="" :column="1" :size="size" border>
                <el-descriptions-item>
                  <template slot="label">
                    用户编号
                  </template>
                  {{ information.no }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    所在学校
                  </template>
                  {{ information.school }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    用户学号
                  </template>
                  {{ information.userNo }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    用户姓名
                  </template>
                  {{ information.username }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    学校编号
                  </template>
                  {{ information.schoolNo }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    用户性别
                  </template>
                  {{ information.sex }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    注册时间
                  </template>
                  {{ information.registerTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    用户余额
                  </template>
                  {{ information.balance }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    用户状态
                  </template>
                  {{ information.status }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </div>
        </fieldset>
    </fieldset>
  </div>
</template>
<script>
export default {
  name: "UserInformation",
  data(){
    return{
      colors: ['orange', 'green', 'cyan', 'blue', 'gray'],
      size:' ',
      information:{
        no:1,
        school:'南昌大学',
        userNo:'xioahui',
        username:'小灰',
        schoolNo:19,
        sex:'男',
        registerTime:'2024-12-17 16:41:33',
        balance:'1928',
        status:'正常'
      }
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.main{
  height: auto !important;
}

.content {
  width: 100%;
  padding: 30px;
}

.layui-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: pink;
  margin: 2px;
}

.bg-orange {
  background-color: #FFB900;
}

.bg-green {
  background-color: #009688;
}

.bg-cyan {
  background-color: #03A9F4;
}

.bg-blue {
  background-color: #2196F3;
}

.bg-gray {
  background-color: #9E9E9E;
}
fieldset:not(.message){
  padding-left: 20px;
  border: 0;
  border-top: 1px solid #DCDFE6;
  margin: 10px 50px 0 50px;
  font-size: 20px;
  height: 100%;
}
fieldset legend{
  padding: 0 10px;
}

.message{
  padding-left: 20px;
  border: 1px solid #DCDFE6;
  margin: 30px 50px 0 60px;
  font-size: 20px;
}
.img{
  margin: 5px 0 10px -20px;
  padding: 0 20px;
}
img{
  width: 100px;
  height: 100px;
}
.information{
  margin:0 -20px;
}
::v-deep .information .el-descriptions-item__label{
  padding-left: 20px;
}
</style>